import styled from "styled-components";
export const Input = styled.input.attrs((props) => ({
  type: "text",
  size: props.size || "1em",
}))`
  border: 2px solid palevioletred;
  margin: ${(props) => props.size};
  padding: ${(props) => props.size};
`;

// Input's attrs will be applied first, and then this attrs obj
export const PasswordInput = styled(Input).attrs({
  type: "password",
})`
  // similarly, border will override Input's border
  border: 2px solid aqua;
`;


// styled()继承了Input样式组件的html和css，再调用了attrs方法，预设标签属性，覆盖了之前的Input样式组件的预设标签属性，再使用模板字符串设置样式部分覆盖Input的样式